<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <style>
  #container {
    position: relative;
  }
  </style>
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
</head>
<body>
  <button id="speedUpBtn">加速</button>
  <button id="slowDownBtn">减速</button>
  <button id="pauseBtn">暂停</button>
  <button id="resumeBtn">继续</button>
  <span>时间线速度：<span id="rate">1.0</span> / fps: <span id="fps">--</span></span>
  <div id="container"></div>
  <script src="/js/spritejs.js"></script>
  <script>
  (async function(){

    const paper = spritejs.Paper2D('#container', 600, 400)
    const Sprite = spritejs.Sprite,
          Label = spritejs.Label

    let res = await paper.preload(
      ['images/birds.png', 'images/birds.json'],
    )

    console.log(res)

    const layer = paper.layer('fg', {
                    handleEvent: false,
                    evaluateFPS: true,
                  })

    function randomBirds(i){
      const s = new Sprite('bird1.png')
      const pos = [100, 50 + 30 * i]
      const duration = Math.round(200 + 300 * Math.random())

      s.attr({
        anchor: [0.5, 0.5],
        pos,
        size: [43, 30],
        zIndex: 200,
      })  

      layer.appendChild(s)

      s.animate([
        {textures: 'bird1.png'},
        {textures: 'bird2.png'},
        {textures: 'bird3.png'},
      ], {
        duration,
        direction: 'alternate',
        iterations: Infinity,
      })

      s.animate([
        {x: 100},
        {x: 500},
        // {x: 100},
      ], {
        duration: duration * 5,
        iterations: Infinity,
        direction: 'alternate',
        easing: 'ease-in-out',        
      })

      s.animate([
        {scale: [1, 1]},
        {scale: [-1, 1]},
        {scale: [1, 1]},
      ], {
        duration: duration * 10,
        iterations: Infinity,
        easing: 'step-end',        
      })

      return s    
    }

    let block1 = new Sprite({
      anchor: [0.5, 0.5],
      pos: [300, 200],
      size: [100, 100],
      bgcolor: 'red',
    })

    layer.appendChild(block1)

    block1.animate([{
      rotate: 0,
      borderRadius: 0,
      bgcolor: 'red',
    },{
      rotate: 180,
      borderRadius: 50,
      bgcolor: 'green',
    },{
      rotate: 360,
      borderRadius: 0,
      bgcolor: 'blue',
    }], {
      duration: 5000,
      direction: 'alternate',
      iterations: Infinity,
    })

    for(let i = 0; i < 1; i++){
      randomBirds(i)
    }

    let pausedPlaybackRate;

    speedUpBtn.onclick = function(){
      layer.timeline.playbackRate += 0.2
      pausedPlaybackRate = null
      rate.innerHTML = layer.timeline.playbackRate.toFixed(1)
    }
    
    slowDownBtn.onclick = function(){
      layer.timeline.playbackRate -= 0.2
      pausedPlaybackRate = null
      rate.innerHTML = layer.timeline.playbackRate.toFixed(1)
    }

    pauseBtn.onclick = function(){
      if(pausedPlaybackRate == null){
        pausedPlaybackRate = layer.timeline.playbackRate
        layer.timeline.playbackRate = 0
        rate.innerHTML = layer.timeline.playbackRate.toFixed(1)
      }
    }

    resumeBtn.onclick = function(){
      if(pausedPlaybackRate != null){
        layer.timeline.playbackRate = pausedPlaybackRate
        pausedPlaybackRate = null
        rate.innerHTML = layer.timeline.playbackRate.toFixed(1)
      }
    }

    setInterval(() => {
      fps.innerHTML = layer.fps
    }, 1000)
  })()
  </script>
</body>
</html>